<template>
  <div class="home">
    <div class="bindBox">
      <canvas id="Mycanvas"></canvas>
      <header v-if="isJiuGan">
        <img src="~@/assets/images/logo.png" alt="" style="width: 40px;height: 30px;margin-right: 5px;">北京久感科技有限公司
      </header>
      <header v-if="!isJiuGan">
        <img src="~@/assets/images/logo2.png" alt="" style="width: 40px;height: 30px;margin-right: 5px;">智安监测
      </header>
      <div class="contentBox">
        <h1 style="text-align: center;margin-bottom: 20px">{{equipInfo.name}}</h1>
        <el-row>
          <el-col :span="10">
            <el-carousel height="250px" indicator-position="outside">
              <el-carousel-item v-for="(item,index) in  equipInfo.picList" :key="index" interval="5000">
                <el-image style="height:100%;width:100%" :src="constUrl+item" fit="contain"></el-image>
              </el-carousel-item>
            </el-carousel>
          </el-col>
          <el-col :span="14" style="padding-top: 50px">
            <p class="info_view"><span class="label_view">编号:</span><span>{{equipInfo.caseCode}}</span></p>
            <p class="info_view"><span class="label_view">型号:</span><span>{{equipInfo.modelName}}</span></p>
            <p class="info_view"><span class="label_view">量程:</span><span>{{equipInfo.equipRange}}</span></p>
            <p class="info_view"><span class="label_view">精度:</span><span>{{equipInfo.accuracy}}</span></p>
            <p class="info_view"><span class="label_view">采集板:</span><span>{{equipInfo.equipSn}}</span></p>
          </el-col>
        </el-row>
        <div class="explanation_view">&nbsp; &nbsp; {{equipInfo.explanation}}</div>
      </div>
    </div>
  </div>
</template>
<script>
import constUrl from '@/services/env'
import {getEquipInfo} from '@/services/model/device-test'
import canvasInit from './canvas'
export default {
  data() {
    return {
      isLoading: false,
      //页面宽度
      screenWidth: document.body.clientWidth,
      equipInfo: {},
      constUrl,
      isJiuGan:true,
      //智安监测的设备id
      otherEquipIdList:['MTQ5NzA1NjU0NDg0ODY2MjUyOQ==','MTU1MTc5ODI5MDA0NDA3NjAzNA==','MTU1MTc5ODI4ODk0MDk3NDA4Mg==','MTU1MTc5ODI4ODk2NjEzOTkwNQ=='
      ,'MTU1MTc5ODI4ODkyODM5MTE2OQ==','MTU1MTc5ODI4ODk4NzExMTQyNQ==','MTQ5NzA1NTU1MDg0ODk0NjE3OA==','MTQ5NzA1NTU1MDY3Mjc4NTQwOQ==']
      //未绑定状态
    }
  },
  methods: {
    previewImg(index, urls) {
      const urlList = []
      urls.map(x => {
        urlList.push({
          url: this.constUrl + x
        })
      })
      this.$refs.imageViewer.showViewer(urlList, index)
    },
    async getEquipInfo(id) {
      let res = await getEquipInfo({id: id})
      this.equipInfo = res.data || {}
    }
  },
  mounted() {
    let canvas = document.getElementById('Mycanvas')
    let context = canvas.getContext('2d')
    canvasInit(canvas, context)
    let url = decodeURIComponent(this.$route.fullPath)
    let id = url.slice(14);
    //老标签地址是这个
    if(url.indexOf("home") !== -1){
      id = url.slice(9);
    }

    this.isJiuGan = !this.otherEquipIdList.includes(id);
    this.getEquipInfo(id);
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenWidth = document.body.clientWidth;
        that.screenWidth = window.screenWidth;
      })();
    }
  }
}
</script>

<style scoped lang="less">
  #Mycanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
  }

  h1 {
    text-align: center;
    font-size: 18px;
    color: #3ceaf7;
    font-weight: bold;
  }

  .explanation_view {

    line-height: 20px;
    font-size: 14px;
    color: #ffffff;
    padding: 10px 5px;
  }

  .info_view {
    padding: 10px 0px;
    text-align: left;

    .label_view {
      color: #ffffff;
      text-align: right;
      display: inline-block;
      font-size: 14px;
      width: 60px;
    }

    span {
      margin-left: 5px;
      color: #c5c5c5;
      font-size: 13px;
    }
  }

  .home {
    width: 100vw;
    height: 100vh;
    /*移动端样式*/

    .bindBox {
      width: 100vw;
      height: 100vh;
      background-image: url("./bindBg.png");
      background-size: 100% 100%;

      /deep/ .el-form-item {
        margin-bottom: 0px !important;
      }

      /deep/ .el-form-item__content {
        line-height: 20px !important;
      }

      /deep/ .el-input__inner {
        width: 100%;
        border-radius: 10px !important;
        font-size: 20px;
        background: #f1f5f9;
        border: none;
        box-shadow: 2px 2px 3px rgba(65, 163, 255, 0.5) inset;
      }

      img {
        width: 100%;
        height: 100%;
      }

      header {
        padding-top: 20px;
        width: 100%;
        height: 50px;
        text-align: center;
        line-height: 40px;
        color: #ffffff;
        text-align: center;
        font-size: 1.6em;
      }


      .contentBox {
        width: 90%;
        min-height: 340px;
        border-radius: 10px;
        margin: auto;
        margin-top: 35px;
        box-sizing: border-box;
        padding: 2vh 1vw;

        .tips {
          color: rgba(0, 0, 0, 0.5);
          margin-left: 20%;
          margin-top: 20px
        }

        /deep/ .el-form-item__error {
          top: 40% !important;
          left: -3% !important;
        }

        .vieFormItemBox {
          /deep/ .el-form-item__error {
            top: 50% !important;
            left: -3% !important;
            /*left: 30% !important;*/
          }
        }

        h3 {
          font-family: YouSheBiaoTiHei;
          text-align: center;
          font-size: 2em;
          margin-bottom: 20px;

        }

        .inputBox {
          margin-bottom: 20px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          p {
            color: #547395;
            font-weight: 600;
            font-size: 120%;
            margin-bottom: 5%;
            width: 20%;
            height: 100%;
            /*line-height: ;*/
          }

          /deep/ .el-input {
            width: 80% !important;
          }


        }

      }

      /deep/ .el-button {
        width: 100%;
        height: 40px;
        line-height: 40px;
        margin: auto;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-weight: 600;
        color: white;
        border-radius: 20px;
        background: linear-gradient(to bottom, #50b8f5, #1f9ff0);
      }
    }
  }

</style>
